<template>
	<div>
		<smpPanel>
			<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form">
				<el-row>
					<el-col :span="24">
						<el-col :span="6">
							<el-form-item label="权限名称:">
								<el-input v-model="query.body.permissionName"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12">
								<searchButtonGroup @search="onSubmit" @reset="reset" online  />
						</el-col>
					</el-col>
				</el-row>
			</el-form>
		</smpPanel>

		<smpPanel title="权限列表">
			<createButton slot="option" @click="addPermissionInfo" />
			<el-table :data="list" size="mini" stripe border style="width: 100%">
				<el-table-column prop="permissionId" label="权限编号" align="center" />
				<el-table-column prop="permissionName" label="权限名称" align="center" />
				<el-table-column prop="permissionType" label="权限类型" align="center">
					<template slot-scope="scope">
						{{scope.row.permissionType|dictName("SMP0021")}}
					</template>
				</el-table-column>
				<el-table-column prop="permissionStatus" label="权限状态" align="center">
					<template slot-scope="scope">
						{{scope.row.permissionStatus|dictName("SMP0005")}}
					</template>
				</el-table-column>
				<el-table-column prop="permissionDescription" label="权限描述" align="center" />
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="handleEdit(scope.$index, scope.row)">修改</el-link>
						<!-- <span class="smp_split">|</span>
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="handleDel(scope.$index, scope.row)">删除</el-link> -->
					</template>
				</el-table-column>

			</el-table>
			<div class="smp-pagination" v-show="total>0">
				<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
					:page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum"
					@current-change="currentChange" @size-change="sizeChange">
				</el-pagination>
			</div>
		</smpPanel>

		<add ref="add" @onSubmit="onSubmit" />
		<edit ref="edit" @onSubmit="onSubmit" />

	</div>
</template>

<script>
	"use strict";
	import {
		getPermissionListByPage,
		delPermissionInfoById
	} from '@/api/permission.js';
	import add from './components/add';
	import edit from './components/edit';

	export default {

		components: {
			add,
			edit
		},
		data() {
			return {

				total: 0,

				list: [],

				query: {
					body: {
						permissionName: '',
					},
					pageNum: 1,
					pageSize: 5
				},

			};



		},

		created() {
			Object.assign(this.query.body, this.$route.query);
			if (this.$route.query.pageNum != undefined) {
				this.query.pageNum = this.$route.query.pageNum;
			}
			if (this.$route.query.pageSize != undefined) {
				this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			this.getList();
		},

		methods: {


			onSubmit() {
				this.query.pageNum = 1;
				this.getList();
			},


			addPermissionInfo() {

				this.$refs.add.showDialog();
			},

			handleEdit(index, row) {
				let row1 = {};
				Object.assign(row1, row);
				this.$refs.edit.showDialog(row1);
			},

			handleDel(index, row) {
				delPermissionInfoById({
					"permissionId": row.permissionId
				}).then(response => {
					this.$message({
						duration: 5000,
						type: 'success',
						message: '删除成功！'
					});
					this.onSubmit();
				}).catch(error => {
					this.$message({
						duration: 5000,
						type: 'error',
						message: '删除失败！'
					});
				})
			},

			reset(form) {
				this.query.body = {}
			},

			getList() {
				getPermissionListByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;

					let query = {};
					Object.assign(query, this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({
						query: query
					})
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			}


		},


	}
</script>

<style>
</style>
